<template>
  <div id="app">
<!--    <img src="./assets/logo.png">-->
    <div class="div_menu">
      <button :class="(i==curMenuIndex)?'menu_select':'menu'"
              v-for="(item,i) in listMenu" v-on:click="switchMenu(i,item)">{{item.title}}</button>
    </div>
    <div class="view_container">
      <Three3D></Three3D>
      <Other1></Other1>
    </div>
  </div>
</template>

<script>
  import BaseComponent from "./qtWebBridge/frame/vue/BaseComponent";
  import Three3D from "./components/Three3D";
  import {FrameManager} from "./qtWebBridge/frame/FrameManager";
  import Other1 from "./components/Other1";

export default {
  components: {Other1, Three3D},
  extends:BaseComponent,
  name: 'App',

  data() {
    return {
      unique_name:'App',
      listMenu:[{title:'Three3D',component:'Three3D'},
        {title:'Other1',component:'Other1'}],
      curMenuIndex:0
    }
  },
  methods:{
    onMounted() {
      this.switchMenu(this.curMenuIndex,this.listMenu[this.curMenuIndex])
    },

    switchMenu(index,item) {
      this.curMenuIndex = index;
      let strComponentName = item.component;
      if(strComponentName) {
        FrameManager.getInstance().switchComponent(strComponentName);
      }
    }
  }
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  left: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
}

  .div_menu{
  }

  .menu{
    color: black;
    font-size: 30px;
    margin-right: 20px;
  }
  .menu_select{
    color: #32b7b9;
    font-size: 30px;
    margin-right: 20px;
  }
  .view_container {
    display: flex;
    flex-grow: 1;
  }
</style>
